<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>KISSY gallery - Huabao - API</title>
    <link rel="shortcut icon" href="../../../../../kissy-dpl/base/assets/favicon.ico"/>
    <link rel="stylesheet" href="../../../../../kissy-dpl/base/assets/reset.css"/>
    <link rel="stylesheet" href="../../../../../kissy-dpl/base/assets/kissy-docs.css"/>
    <script src="http://docs.kissyui.com/kissy/build/kissy.js"></script>
    <script src="../../../../../kissy-dpl/base/assets/kissy-docs.js"></script>
</head>
<body>
<div id="header">
    <h1 class="logo"><a href="http://kissyui.com/"><img
            src="../../../../../kissy-dpl/base/assets/logo.png" alt="KISSY"/></a></h1>

    <div class="sub-title">Gallery</div>
    <ul class="navigation">
        <li><a href="http://blog.kissyui.com/">博客</a></li>
        <li><a href="http://github.com/kissyteam">源码</a></li>
    </ul>

</div>
<div id="content">
    <div class="s-crumbs">
        <span>当前位置：</span>
        <a href="http://kissyui.com/">KISSY</a>
        <a href="../../../../index.html">Gallery</a>
        <a href="../demo.html">Huabao</a>
        <span>API</span>
    </div>
    <pre class="s-section">
作者：法海 &lt;<a href="mailto:fahai@taobao.com">fahai@taobao.com</a>&gt;
功能：huabao
描述：此类是一个包装类，对下引用着 model 中的 poster 和 pic，对上提供业务方面的高层接口
　　　Pic 类主要定义了一些标准的属性字段，并且提供一个可被重写的 parse 方法。
　　　Huabao 类从 Base 继承而来，使用标准的 get / set 方法来访问字段。
源码：<a href="../huabao.js">huabao.js</a></pre>

    <h3 class="s-title">API</h3>

    <div class="s-section">

        <h4 class="s-api-title">属性</h4>

        <div class="s-api-params">
            <ul class="s-list">
                <li><code>{Object} <em>dataSource</em></code> 数据源</li>
                <li><code>{Object} <em>data</em></code>
                画报相关数据，格式为
<pre>{
    poster: new Poster(),
    pics: [new Pic(), ...]
}</pre></li>
                <li><code>{Object} <em>rawData</em></code> 以 json 形式存放的画报相关数据，<strong>只读</strong></li>

                <li><code>{Boolean} <em>autoRendering</em></code> 如果为 true，则使用默认的模板渲染画报数据，默认 false</li>

                <li><code>{HTMLElement} <em>srcNode</em></code> 画报的容器节点</li>
                <li><code>{HTMLElement} <em>nav</em></code> 缩略图导航区的容器节点，关于 content 和 nav 一块的设计参见 switchable</li>
                <li><code>{HTMLElement} <em>content</em></code> 大图区的容器节点</li>

                <li><code>{HTMLCollection} <em>triggers</em></code> 缩略图导航区的所有孩子节点集合</li>
                <li><code>{HTMLCollection} <em>panels</em></code> 大图区的所有孩子节点集合</li>

                <li><code>{String} <em>navCls</em></code></li>
                <li><code>{String} <em>contentCls</em></code></li>
                <li><code>{String} <em>triggerCls</em></code></li>
                <li><code>{String} <em>panelCls</em></code></li>

                <li><code>{Number} <em>activeIndex</em></code> 当前选定的图片索引</li>
                <li><code>{Number} <em>length</em></code> 图片列表长度，即 huabao.get("data").pics.length</li>
                <li><code>{Number} <em>pageIndex</em></code> 为 carousel 形式的缩略图区服务。当前缩略图区的页码</li>
                <li><code>{Number} <em>pageSize</em></code> 为 carousel 形式的缩略图区服务。缩略图区一页的长度，一般和 carousel 的 steps 一致</li>
                <li><code>{Number} <em>pageLength</em></code> 为 carousel 形式的缩略图区服务。整个 carousel 一共有多少页</li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>String render(container, template)</code>
        </div>

        <h4 class="s-api-title">参数</h4>

        <div class="s-api-params">
            <ul class="s-list">
                <li><code>{HTMLElement} <em>container</em></code> </li>
                <li><code>{String} <em>template</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">返回</h4>

        <div class="s-api-return">
            <ul class="s-list">
                <li><code>{String} <em>output</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>Poster getPoster()</code>
        </div>

        <h4 class="s-api-title">返回</h4>

        <div class="s-api-return">
            <ul class="s-list">
                <li><code>{Poster} <em>poster</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>Array&lt;Pic> getPics()</code>
        </div>

        <h4 class="s-api-title">返回</h4>

        <div class="s-api-return">
            <ul class="s-list">
                <li><code>{Array&lt;Pic>} <em>pics</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>Pic getPic(id)</code>
        </div>

        <h4 class="s-api-title">参数</h4>

        <div class="s-api-params">
            <ul class="s-list">
                <li><code>{Number} <em>id</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">返回</h4>

        <div class="s-api-return">
            <ul class="s-list">
                <li><code>{Pic} <em>pic</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>void switchTo(index)</code>
        </div>

        <h4 class="s-api-title">参数</h4>

        <div class="s-api-params">
            <ul class="s-list">
                <li><code>{Number} <em>index</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>void pageTo(index)</code>
        </div>

        <h4 class="s-api-title">参数</h4>

        <div class="s-api-params">
            <ul class="s-list">
                <li><code>{Number} <em>index</em></code> </li>
            </ul>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>void prev()</code>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>void next()</code>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>void prevPage()</code>
        </div>

        <h4 class="s-api-title">方法</h4>

        <div class="s-api-method">
            <code>void nextPage()</code>
        </div>
    </div>
</div>
<div id="footer">
    &copy; Copyright 2010~2011, KISSY Team.
</div>
</body>
</html>